<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱情谚语</title>
    <link rel="stylesheet" href="../css/all.min.css">
    <script src="../js/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'MyFont', Roboto, Helvetica, Arial, sans-serif;
        }
        @font-face {
            font-family: 'MyFont';
            src: url('../font/MyFont-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #fafafa 100%);
            color: #333;
            line-height: 1.8;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 680px;
            margin: 0 auto;
        }
        .content {
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            padding: 35px 30px;
            margin-top: 30px;
        }
        .title {
            font-size: 28px;
            color: #222;
            line-height: 1.4;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f0f0;
            text-align: center;
        }
        .highlight {
            text-align: center;
            margin: 30px 0;
            padding: 20px;
            background: linear-gradient(135deg, #fef5f5 0%, #f9f9ff 100%);
            border-radius: 12px;
        }
        .highlight p:first-child {
            font-size: 20px;
            color: #e66465;
            line-height: 1.6;
        }
        .highlight p:last-child {
            font-size: 16px;
            color: #888;
            margin-top: 10px;
        }
        .section-title {
            font-size: 22px;
            color: #222;
            margin: 40px 0 25px 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        .quote-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            padding: 25px;
            margin-bottom: 25px;
            border-left: 4px solid #e66465;
        }
        .quote-text {
            font-size: 17px;
            color: #444;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        .quote-author {
            font-size: 14px;
            color: #888;
            text-align: right;
            font-style: italic;
        }
        .final-message {
            text-align: center;
            padding: 20px;
            background-color: #f8f9fc;
            border-radius: 12px;
            margin-top: 40px;
        }
        .final-message p:first-child {
            font-size: 18px;
            color: #555;
            line-height: 1.6;
        }
        .final-message p:last-child {
            font-size: 14px;
            color: #888;
            margin-top: 15px;
        }
        /* 工具按钮组样式 */
        .tool-btn-group {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .tool-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(to right, #e66465, #9198e5);
            color: white;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            transition: all 0.3s ease;
        }
        .tool-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        }
        /* 导出进度样式 */
        .export-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background-color: #f3f3f3;
            z-index: 9999;
            display: none;
        }
        .export-progress-bar {
            height: 100%;
            background: linear-gradient(to right, #e66465, #9198e5);
            width: 0%;
            transition: width 0.3s ease;
        }
        /* 导出完成提示 */
        .export-complete {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px 30px;
            border-radius: 10px;
            font-size: 18px;
            z-index: 10000;
            display: none;
            text-align: center;
        }
        .export-complete button {
            margin-top: 15px;
            padding: 8px 20px;
            background-color: #e66465;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        /* 截图区域 - 修改为更好的定位方式 */
        #screenshot-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 375px;
            height: auto;
            background-color: #f5f7fa;
            padding: 20px 16px;
            visibility: hidden;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="tool-btn-group">
        <button class="tool-btn" id="font-enlarge"><i class="fas fa-search-plus"></i></button>
        <button class="tool-btn" id="font-reduce"><i class="fas fa-search-minus"></i></button>
        <button class="tool-btn" id="export-image"><i class="fas fa-file-export"></i></button>
    </div>

    <!-- 导出进度条 -->
    <div class="export-progress" id="export-progress">
        <div class="export-progress-bar" id="export-progress-bar"></div>
    </div>

    <!-- 导出完成提示 -->
    <div class="export-complete" id="export-complete">
        <p>所有图片已导出完成！</p>
        <p>共导出 <span id="total-images">0</span> 张图片</p>
        <button id="close-complete">确定</button>
    </div>

    <!-- 截图区域 - 修改为绝对定位且隐藏 -->
    <div id="screenshot-container"></div>

    <div class="container" id="content-container">
        <div class="content">
            <h1 class="title">流传千古的爱情谚语</h1>
            
            <div class="highlight">
                <p>"门当户对，久处不累"</p>
                <p>—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">宁拆十座庙，不毁一桩婚</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">男怕入错行，女怕嫁错郎</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">有情饮水饱，无情食饭饱</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">娶妻求贤，勿以貌取人</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">嫁鸡随鸡，嫁狗随狗</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">千里姻缘一线牵</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">勿听是非，夫妻和睦</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">会嫁嫁对头，不会嫁嫁门楼</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">夫妻同苦共甘，棒打鸳鸯不散</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">夫不嫌妻丑，活过九十九</p>
                <p class="quote-author">—— 中国传统谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情是忠诚的桥梁</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱不贵亲热，而贵长久</p>
                <p class="quote-author">—— 英国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">不太热烈的爱情才会维持久远</p>
                <p class="quote-author">—— 莎士比亚</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">忠诚的胸怀是爱情的安全的港口</p>
                <p class="quote-author">—— 德国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情的火焰需要不断添加忠诚的干柴</p>
                <p class="quote-author">—— 苏联谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">志同道合是爱情的基础</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">互相信赖是幸福的根源</p>
                <p class="quote-author">—— 印度谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">猜疑是爱情之树上的一把斧头</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">当贫穷从门外进来，爱情便从窗口溜走</p>
                <p class="quote-author">—— 托富勒</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情能化陋室为宫殿</p>
                <p class="quote-author">—— 德国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">跟恋人在一起，窝棚也不比天堂差</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">标了价的爱情是虚假的</p>
                <p class="quote-author">—— 英国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">钱财买不到真情</p>
                <p class="quote-author">—— 中国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">乌云过后阳光更欢，不和之后爱情愈甜</p>
                <p class="quote-author">—— 拉丁语谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">短暂的离别会促进爱情，长久的分离却会将它扼杀</p>
                <p class="quote-author">—— 夏尔德圣埃弗雷芒</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情不是强扭的，幸福不是天赐的</p>
                <p class="quote-author">—— 中国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情没有规则，也不应该有条件</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">热得快的爱情，冷得也快</p>
                <p class="quote-author">—— 中国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">男追女隔层山，女追男隔层纱</p>
                <p class="quote-author">—— 中国谚语</p>
            </div>

            <div class="quote-card">
                <p class="quote-text">爱情是生命的盐</p>
                <p class="quote-author">—— 欧洲谚语</p>
            </div>

            <div class="final-message">
                <p>"真正的爱情，应该是两个人，彼此理解，互相尊重，不缠绕，不牵绊，不占有，然后相伴，走过一段漫长的旅程。"</p>
                <p>愿这些古老而智慧的谚语能给你带来关于爱情的启示，找到属于自己的幸福。</p>
            </div>
        </div>
    </div>

    <script>
        // 字体大小调整功能
        const elements = {
            title: document.querySelector('.title'),
            highlightQuote: document.querySelector('.highlight p:first-child'),
            highlightAuthor: document.querySelector('.highlight p:last-child'),
            sectionTitles: document.querySelectorAll('.section-title'),
            quoteTexts: document.querySelectorAll('.quote-text'),
            quoteAuthors: document.querySelectorAll('.quote-author'),
            finalQuote: document.querySelector('.final-message p:first-child'),
            finalText: document.querySelector('.final-message p:last-child')
        };
        
        const baseSizes = {
            title: 28,
            highlightQuote: 20,
            highlightAuthor: 16,
            sectionTitle: 22,
            quoteText: 17,
            quoteAuthor: 14,
            finalQuote: 18,
            finalText: 14
        };
        
        let currentSizes = {...baseSizes};
        
        document.getElementById('font-enlarge').addEventListener('click', function() {
            Object.keys(currentSizes).forEach(key => {
                currentSizes[key] = Math.min(currentSizes[key] + 1, baseSizes[key] * 2);
            });
            updateFontSizes();
        });
        
        document.getElementById('font-reduce').addEventListener('click', function() {
            Object.keys(currentSizes).forEach(key => {
                currentSizes[key] = Math.max(currentSizes[key] - 1, Math.floor(baseSizes[key] / 2));
            });
            updateFontSizes();
        });
        
        function updateFontSizes() {
            elements.title.style.fontSize = `${currentSizes.title}px`;
            elements.highlightQuote.style.fontSize = `${currentSizes.highlightQuote}px`;
            elements.highlightAuthor.style.fontSize = `${currentSizes.highlightAuthor}px`;
            elements.sectionTitles.forEach(el => el.style.fontSize = `${currentSizes.sectionTitle}px`);
            elements.quoteTexts.forEach(el => el.style.fontSize = `${currentSizes.quoteText}px`);
            elements.quoteAuthors.forEach(el => el.style.fontSize = `${currentSizes.quoteAuthor}px`);
            elements.finalQuote.style.fontSize = `${currentSizes.finalQuote}px`;
            elements.finalText.style.fontSize = `${currentSizes.finalText}px`;
        }

        // 单句谚语导出功能
        document.getElementById('export-image').addEventListener('click', async function() {
            // 显示加载状态
            this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
            this.disabled = true;
            
            // 显示进度条
            const progressBar = document.getElementById('export-progress');
            const progressIndicator = document.getElementById('export-progress-bar');
            progressBar.style.display = 'block';
            progressIndicator.style.width = '0%';
            
            try {
                // 1. 获取所有谚语卡片
                const quoteCards = document.querySelectorAll('.quote-card');
                
                if (quoteCards.length === 0) {
                    throw new Error('没有找到谚语卡片');
                }
                
                // 2. 设置图片容器样式
                const cardWidth = 375;
                const baseHeight = 200; // 基础高度，会根据内容自动调整
                
                // 信签纸背景图片
                const backgroundImageUrl = '';
                
                // 3. 为每个谚语卡片创建图片
                for (let i = 0; i < quoteCards.length; i++) {
                    // 更新进度条
                    const progress = ((i + 1) / quoteCards.length) * 100;
                    progressIndicator.style.width = `${progress}%`;
                    
                    // 获取当前谚语卡片
                    const currentCard = quoteCards[i];
                    
                    // 创建独立的图片容器
                    const imageContainer = document.createElement('div');
                    imageContainer.style.position = 'relative';
                    imageContainer.style.width = `${cardWidth}px`;
                    imageContainer.style.minHeight = `${baseHeight}px`;
                    imageContainer.style.padding = '40px 30px';
                    imageContainer.style.borderRadius = '16px';
                    imageContainer.style.boxShadow = '0 8px 30px rgba(0,0,0,0.1)';
                    // 设置信签纸背景
                    imageContainer.style.backgroundImage = `url(${backgroundImageUrl})`;
                    imageContainer.style.backgroundSize = 'cover';
                    imageContainer.style.backgroundPosition = 'center';
                    imageContainer.style.backgroundRepeat = 'no-repeat';
                    
                    // 复制谚语内容
                    const cardContent = document.createElement('div');
                    cardContent.innerHTML = currentCard.innerHTML;
                    
                    // 调整字体大小和颜色
                    const quoteText = cardContent.querySelector('.quote-text');
                    const quoteAuthor = cardContent.querySelector('.quote-author');
                    
                    if (quoteText) {
                        quoteText.style.fontSize = '18px';
                        quoteText.style.lineHeight = '1.8';
                        quoteText.style.marginBottom = '20px';
                        quoteText.style.color = '#333'; // 深灰色
                        quoteText.style.textShadow = '1px 1px 2px rgba(255, 255, 255, 0.9)';
                    }
                    
                    if (quoteAuthor) {
                        quoteAuthor.style.fontSize = '16px';
                        quoteAuthor.style.color = '#666'; // 中灰色
                        quoteAuthor.style.textShadow = '1px 1px 2px rgba(255, 255, 255, 0.9)';
                    }
                    
                    // 添加到容器
                    imageContainer.appendChild(cardContent);
                    
                    // 添加到body（临时）
                    imageContainer.style.position = 'absolute';
                    imageContainer.style.left = '-9999px'; // 隐藏在视口外
                    document.body.appendChild(imageContainer);
                    
                    // 确保元素已渲染并获取实际高度
                    await new Promise(resolve => setTimeout(resolve, 300));
                    const actualHeight = imageContainer.offsetHeight;
                    imageContainer.style.height = `${actualHeight}px`;
                    
                    // 使用html2canvas生成图片
                    const canvas = await html2canvas(imageContainer, {
                        scale: 2,
                        useCORS: true,
                        logging: true,
                        backgroundColor: '#f5f7fa',
                        windowWidth: cardWidth,
                        windowHeight: actualHeight
                    });
                    
                    // 移除临时容器
                    document.body.removeChild(imageContainer);
                    
                    // 验证canvas是否为空
                    console.log(`第${i+1}张图片尺寸: ${canvas.width}x${canvas.height}`);
                    if (canvas.width === 0 || canvas.height === 0) {
                        throw new Error(`第${i+1}张图片导出失败，Canvas为空`);
                    }
                    
                    // 创建下载链接
                    const link = document.createElement('a');
                    // 从谚语文本中提取文件名（移除特殊字符）
                    const quoteTextContent = quoteText ? quoteText.textContent : '';
                    const cleanFileName = quoteTextContent.length > 10 
                        ? quoteTextContent.substring(0, 10).replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '') 
                        : quoteTextContent.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '');
                    
                    link.download = `爱情谚语_${i + 1}_${cleanFileName}.png`;
                    link.href = canvas.toDataURL('image/png');
                    
                    // 触发下载
                    link.click();
                    console.log(`第${i+1}张图片已下载: 爱情谚语_${i + 1}_${cleanFileName}.png`);
                    
                    // 等待下载完成
                    await new Promise(resolve => setTimeout(resolve, 800));
                }
                
                // 显示完成提示
                const completeDialog = document.getElementById('export-complete');
                document.getElementById('total-images').textContent = quoteCards.length;
                completeDialog.style.display = 'block';
                
            } catch (err) {
                console.error('导出失败：', err);
                alert('图片导出失败: ' + err.message);
                
                // 确保截图容器被隐藏
                document.getElementById('screenshot-container').style.visibility = 'hidden';
            } finally {
                // 恢复按钮状态
                this.innerHTML = '<i class="fas fa-file-export"></i>';
                this.disabled = false;
                
                // 隐藏进度条
                progressBar.style.display = 'none';
            }
        });

        // 关闭导出完成提示
        document.getElementById('close-complete').addEventListener('click', function() {
            document.getElementById('export-complete').style.display = 'none';
        });
    </script>
</body>
</html>